<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content=no-cache/ http-equiv=Cache-Control>
    <title>Admin</title>
</head>
<body onload="allcount()">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
    <div class="layout">
        <layout :style="{minHeight: '100vh'}">
            <sider collapsible :collapsed-width="78" v-model="isCollapsed">
                <i-menu  theme="dark" width="auto" :class="menuitemClasses" open-names="['1','2']">
                    <submenu name="1">
                        <template slot="title">
                            用户管理
                            <icon type="ios-paper" />
                        </template>
                        <menu-item name="1-1">
                            <span>新增用户></span></menu-item>
                        <menu-item name="1-2">
                            <span onclick="demo()">用户查询></span></menu-item>
                        <menu-item name="1-3">
                            <span>删除用户
                        </span>></menu-item>
                    </submenu>
                    <submenu name="2">
                        <template slot="title">
                            问卷管理
                            <icon type="ios-people" />
                        </template>
                        <menu-item name="2-1">
                            <span onclick="analyzing()">
                                答题情况
                            </span></menu-item>
                        <menu-item name="2-2">
                            <span onclick="analyzing()">
                                综合分析
                            </span></menu-item>
                        <menu-item name="2-3">
                            <span onclick="addQuestion()">
                                更新题库
                            </span></menu-item>
                    </submenu>
                    <submenu name="3">
                        <template slot="title">
                            <span onclick="listener()">
                                聊天室监控
                            </span>
                            <icon type="ios-stats" />
                        </template>
                    </submenu>
                </i-menu>
            </sider>
            <layout>
                <i-header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                    <h2 style="margin-left: 20px">欢迎您!管理员</h2>
                </i-header>
                <i-content :style="{padding: '0 16px 16px'}">
                    <breadcrumb :style="{margin: '16px 0'}">
                        <i-input  v-model="Sno" placeholder="按学号查询" style="width: 160px;margin-left: 25px" clearable></i-input>
                        <i-button shape="circle" icon="ios-search" @click="searchbySno" ></i-button>
                        <i-input  v-model="Sname" placeholder="按姓名查询" style="width: 160px;margin-left: 30px" clearable></i-input>
                        <i-button shape="circle" icon="ios-search" @click="searchbyName"></i-button>
                        <i-input  v-model="Sclass" placeholder="按班级查询" style="width: 160px;margin-left: 30px" clearable></i-input>
                        <i-button shape="circle" icon="ios-search" @click="searchbyClass"></i-button>
                        <i-input  v-model="Collage" placeholder="按学院查询" style="width: 160px;margin-left: 30px" clearable></i-input>
                        <i-button shape="circle" icon="ios-search" @click="searchbyCollage"></i-button>
                        <i-input  v-model="Sage" placeholder="按年龄查询" style="width: 160px;margin-left: 30px" clearable></i-input>
                        <i-button shape="circle" icon="ios-search" @click="searchbySage"></i-button>
                    </breadcrumb>
                    <card>
                        <i-table border :columns="columns1" :data="data1">
                            <template slot-scope="{ row }" slot="name">
                                <strong>{{ row.name }}</strong>
                            </template>
                            <template slot-scope="{ row, index }" slot="action">
                                <i-button type="error" size="small" @click="remove(index)">Delete</i-button>
                            </template>
                        </i-table>
                        <div style="margin-left: 50px;margin-top: 20px">
                            <page :total="dataCount" :page-size="pageSize" :current.sync="pageNum"
                                  @on-change="changepage(pageNum)" show-total></page>
                        </div>
                    </card>
                </i-content>
            </layout>
        </layout>
    </div>
</div>

<script>
    var cols = [
        {
            title: 'Sno',
            key: 'sno'
        },
        {
            title: "Sname",
            key: "sname"
        },
        {
            title: "Sage",
            key: "sage"
        },
        {
            title: "Scall",
            key: "scall"
        },
        {
            title: 'Collage',
            key: 'collage'
        },
        {
            title: "Major",
            key: "major"
        },
        {
            title: "Sclass",
            key: "sclass"
        },
        {
            title: 'Action',
            slot: 'action',
            width: 150,
            align: 'center'
        }

    ];

    var Page = new Vue({
        el:'#app',
        data () {
            return {
                isCollapsed: false,
                columns1:cols,
                data1:[],
                dataCount:0,
                pageSize:8,
                pageNum:1,
                Sno:'',
                Sname:'',
                Sclass:'',
                Collage:'',
                Sage:''
            }
        },
        computed: {
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods: {
            remove (index) {
                let sno = this.data1[index].sno;
                $.ajax({
                   url:"/admin/delete",
                   type:"get",
                   data:{
                      "Sno":sno
                   } ,
                   success(res) {
                       Page.rem(index);
                   },
                });

            },
            rem(index){
                this.data1.splice(index, 1);
            },
            changepage(curr){
                $.ajax({
                    url: '/admin/findpage',
                    type: 'get',
                    data: {
                        "curr": curr,
                        "pageSize": this.pageSize
                    },
                    success(res) {
                        let msg = JSON.stringify(res);
                        msg = $.parseJSON(msg);
                        setTable(msg);
                    }
                })
            },
            searchbySno(){
                countSno();
                let sno=this.Sno;
                $.ajax({
                    type:'get',
                    url:'/admin/findbySno',
                    data:{
                        "Sno":sno,
                    }
                });
                this.changepage(1);
            },
            searchbySage(){
                countSage();
                sage=this.Sage;
                $.ajax({
                    type:'get',
                    url:'/admin/findbyAge',
                    data:{
                        "Sage":sage
                    }
                });
                this.changepage(1)
            },
            searchbyCollage(){
                countCollage();
                collage=this.Collage;
                $.ajax({
                    type:'get',
                    url:'/admin/findbyCollage',
                    data:{
                        "Collage":collage
                    }
                });
                this.changepage(1)
            },
            searchbyName(){
                countName();
                sname=this.Sname;
                $.ajax({
                    type:'get',
                    url:'/admin/findbyName',
                    data:{
                        "Sname":sname
                    }
                });
                this.changepage(1)
            },
            searchbyClass(){
                countClass();
                sclass=this.Sclass;
                $.ajax({
                    type:'get',
                    url:'/admin/findbyClass',
                    data:{
                        "Sclass":sclass
                    }
                });
                this.changepage(1)
            }
        }
    });
    function allcount() {
        $.ajax({
            url:'/admin/findallcount',
            type:'get',
            success(res){
                setPage(res);
            }
        })
    }
    function setPage(all) {
        Page.dataCount=all;
        Page.changepage(1);
    }
    function setTable(dat) {
        // Page.columns1=columns;
        Page.data1=dat;
    }
    function countSage() {
        $.ajax({
            url:'/admin/findAgeCount',
            type:'get',
            data:{
                "age":Page.Sage
            },
            success(res){
                Page.dataCount=res;
            }
        })
    }
    function countName() {
        $.ajax({
            url:'/admin/findNameCount',
            type:'get',
            data:{
                "Sname":Page.Sname
            },
            success(res){
                Page.dataCount=res;
            }
        })
    }
    function countClass() {
        $.ajax({
            url:'/admin/findClassCount',
            type:'get',
            data:{
                "Sclass":Page.Sclass
            },
            success(res){
                Page.dataCount=res;
            }
        })
    }
    function countCollage() {
        $.ajax({
            url:'/admin/findCollageCount',
            type:'get',
            data:{
                "Collage":Page.Collage
            },
            success(res){
                Page.dataCount=res;
            }
        })
    }
    function countSno() {
        $.ajax({
            url:'/admin/findSnoCount',
            type:'get',
            data:{
                "Sno":Page.Sno,
            },
            success(res) {
                Page.dataCount=res;
            }
        })
    }

    function listener() {
        window.location.href='/admin/listener'
    }
    function analyzing() {
        window.location.href='/admin/analyzing'
    }
    function addQuestion() {
        window.location.href='/admin/addQuestion'
    }
    function demo() {
        window.location.href='/findall'
    }
</script>
</body>
</html>